<script setup lang="ts">
import {TabsPaneContext} from "element-plus";
import {ref} from "vue";
import project from '../components/renwu.vue'
import question from "../components/wenda.vue";
import progress_self from "../components/jindu.vue";
import TouPiao_self from  "../components/toupian.vue";
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<template>
<div class="main">
  <div class="top">
    <img src="/img/course_bg.png" alt="" height="300px">
  </div>
  <div class="menu"><router-link :to="{ path: '/' }" style="color: white">首页</router-link> / 课程详细</div>
  <div class="course">
    <div class="course_name">前端框架应用项目开发</div>
    <div class="course_people">(已选105人)</div>
  </div>
  <div class="teacher_info">
    <div class="left">
      <div class="logo"><el-avatar :size="50" /></div>
    </div>
    <div class="right">
      <div class="t_name">刁老师</div>
      <div class="tags">
        <el-tag key="教师" type="primary" effect="dark" >教师</el-tag>
      </div>
    </div>
    <div class="btn-cj">
      <el-button type="primary" plain><router-link :to="{ path: '/common' }">课程作业</router-link></el-button>
    </div>
  </div>
</div>
  <div class="c_card">
    <el-card style="width: 500px">
      <div class="study_progress">已学60%</div>
      <div class="jtt">
        <el-progress
            :text-inside="true"
            :stroke-width="22"
            :percentage="60"
            status="warning"/>
      </div>
      <div class="study_num">已学:6 在学:2 待学:2</div>
      <div class="study-btn"><el-button size="large" type="warning" round>继续学习</el-button></div>
    </el-card>
  </div>

  <div class="bottom-info">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="任务" name="first"><div class="items"><project></project></div></el-tab-pane>
      <el-tab-pane label="问答" name="second"><div class="items"><question></question></div></el-tab-pane>
      <el-tab-pane label="进度榜" name="third"><div class="items"><progress_self></progress_self></div></el-tab-pane>
      <el-tab-pane label="投票" name="fourth"><div class="items"><TouPiao_self></TouPiao_self></div></el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.main
{
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
}
.top
{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.menu
{
  text-align: left;
  position: relative;
  top: 80px;
  margin-top: 20px;
  z-index:1000;
  color: #efefef;
  margin-left: 40px;
}
.course{
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  top: 100px;
  z-index: 1000;
  justify-items: end;
  margin-left: 40px;
}
.course_name
{
  font-size: 24px;
  font-weight: 800;
  color:white;
}
.course_people{
  font-size: 20px;
  font-weight: 600;
  color:white;
}
.teacher_info
{
  display: flex;
  flex-wrap: wrap;
  position: relative;
  top: 130px;
  z-index: 1000;
  max-width: 300px;
  margin-left: 40px;
}
.t_name
{
  color: white;
  font-weight: 800;
  font-size: 18px;
  margin-left: 10px;
}
.left
{
  width: 50px;
}
.right
{
  width: 80px;
}
.btn-cj
{
  width: 100px;
  justify-items: center;
  text-align: center;
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.c_card
{
  width: 400px;
  z-index: 1001;
  height: 220px;
  position: absolute;
  top: 100px;
  right: 40px;
}
.el-card
{
  max-width: 400px;
  width: 300px;
  height: 220px;
  border-radius: 20px;
  display: flex;
}
.study_progress
{
  color: black;
  font-size: 20px;
  font-weight: 600;
  text-align: left;
  margin-bottom: 10px;
}
.jtt
{
  width: 350px;
  max-width: 350px;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 350px;
  width: 350px;
}
.study_num
{
  font-size: 16px;
  padding: 20px 20px 20px 0px;
  color: darkgray;
  text-align: left;
}
.study-btn
{
  max-width: 350px;
  width: 350px;
}
.el-button
{
  width: 300px;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.items
{
  position: relative;
  top: 0;
}
.bottom-info
{
  position: absolute;
  top: 320px;
  left: 0;
  align-items: center;
  justify-items: center;
  text-align: center;
  width: 100%;
}
/* Centering el-tabs */
.demo-tabs {
  text-align: center;
}

/* Remove underline from tabs */
.el-tabs__nav {
  border-bottom: none;
}

/* Resize project component and add padding */
.items {
  width: 80%;
  margin: 0 auto;
  padding: 0 10%; /* Add 10% padding to left and right */
}
</style>